<template>
  <div ref="lineChart" class="lineChart" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'LineChart',
  mounted() {
    const lineCharts = echarts.init(this.$refs.lineChart)
    const option = {
      xAxis: {
        // 隐藏X轴
        show: false,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        // 隐藏Y轴
        show: false,
        type: 'value'
      },
      // 网格处理
      grid: {
        left: 0,
        bottom: 0,
        top: 0,
        right: 0
      },
      series: [
        {
          data: [10, 50, 20, 100, 70, 40, 150],
          type: 'line',
          // 转折平滑处理
          smooth: true,
          // 拐点隐藏
          itemStyle: {
            opacity: 0
          },
          // 线条颜色
          lineStyle: {
            color: 'purple'
          },
          // 填充颜色
          areaStyle: {
            // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'purple' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#fff' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }
    lineCharts.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
.lineChart {
  width: 100%;
  height: 100%;
}
</style>
